<template>
  <div class="home">
    <el-container>
      <el-header style="height:50px;">
        <div class="title">优印染生产在线</div>
        <div class="curruser">
          <span>当前用户：{{currUser.username}}&nbsp;|&nbsp;{{currUser.factname}}</span>
          <a href="#">修改密码</a>
          <a href="#" @click.prevent="logout" >退出系统</a>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">

          <el-menu v-for="parent in parentList" :key="parent.menuId"
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{parent.menuName}}</span>
              </template>
              <el-menu-item v-for="sub in parent.subMenuList" :key="sub.menuId" :index="`/home${sub.menuUrl}`">{{sub.menuName}}</el-menu-item>
             
            </el-submenu>
          </el-menu>

        </el-aside>
        <el-container>
          <el-main><router-view /></el-main>
          <el-footer style="height:30px;">版权所有：&copy;XXX软件开发有限公司</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
//import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  data(){
    return {
      currUser:{},//当前用户
      parentList:[],//父菜单集合
    };
  },
  methods:{
    handleSelect(key) {
        console.log(key);
        this.$router.push(key);
    },

    getCurrUser(){
      this.$myGet('safty/home/curruser')
          .then(data=>{
            this.currUser=data;
          });
      //this.$axios.get('safty/home/curruser')
      //    .then(response=>{
      //      this.currUser=response.data;
      //    })
    },

    logout(){
      this.$axios.delete('security/logout')
          .then(response=>{
              let result = response.data;
              if(result.success){
                this.$message.success({
                  message:result.message,
                  onClose:()=>{
                    this.$router.push('/');
                  }
                });

              }else{
                this.$message.error(result.message);
                //这是错误情况
              }
            });
    },

    getMenu(){
      this.$myGet('safty/home/menu')
          .then(data=>{
            this.parentList = data;
          });
      //this.$axios.get('safty/home/menu')
      //    .then(response=>{
      //      this.parentList = response.data;
      //    })
    }
  },
  mounted(){
    this.getCurrUser();
    this.getMenu();
  }
};
</script>

<style scoped>
.home {
  height: 100%;
  width: 100%;
}

.el-container {
  height: 100%;
  width: 100%;
}

.el-header {
  background-color: #303133;
  padding-left: 2px;

  position: relative;
}

.el-footer {
  background-color: #303133;
  font-size: 13px;
  line-height: 30px;
  color: #cccccc;
}

.el-aside {
  background-color: #404143;
}

.el-main {
  background-color:white;
  padding:10px 2px 5px 2px;
}

.title {
  color: #cccccc;
  font-size: 24px;
  text-align: left;
  line-height: 50px;
}

.curruser {
  position: absolute;
  bottom: 2px;
  right: 5px;

  color: white;
}

.curruser > * {
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
}

.curruser > a:link,
.curruser > a:visited {
  color: antiquewhite;
  text-decoration: none;
}

.curruser > a:hover {
  color: white;
  font-weight: bold;
}
</style>
